<template>
 <div class="page" style="background-color:rgba(248, 248, 248, 0.8)">
	     <!--<div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>-->
  <list>
   <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
            :display="refreshing ? 'show' : 'hide'">
       <text class="indicator-text">{{refreshTitle}}</text>
   </refresh>
   <cell>
    <div :style="{backgroundColor:backgroundColor}">
     <div v-for="item in componentsList">
      <component :content="item" :is="item.name" :pageNum="pageNum" />
     </div>
    </div>

   </cell>
   <loading class="loading" @loading="onloading"
            :display="loadinging ? 'show' : 'hide'">
       <text class="indicator-text">加载中...</text>
   </loading>
  </list>
 </div>

</template>
<script>
 import {
  list as designerList
 } from '../../api/designer.js'
 import {
  list,
  find
 } from '../../api/wxPage'

 import acrossAd from '../index/component/acrossAd/acrossAd.vue'
 import category_ten from '../index/component/category/category_ten.vue'
 import category_eight from '../index/component/category/category_eight.vue'
 import category_six from '../index/component/category/category_six.vue'
 import category_five from '../index/component/category/category_five.vue'
 import category_four from '../index/component/category/category_four.vue'
 import category_three from '../index/component/category/category_three.vue'
 import acrossService from '../index/component/acrossService/acrossService.vue'
 import hotGoods from '../index/component/hotGoods/hotGoods.vue'
 import xcxAd from '../index/component/xcxAd/xcxAd.vue'
 import swipersChange from '../index/component/swipers/swipersChange.vue'
 import swipers from '../index/component/swipers/swipers.vue'
 import brand from '../index/component/brand/brand.vue'
 import adBanner from '../index/component/adBanner/adBanner.vue'
 import noData from '../../components/noData/noData.vue'
 import products from '../index/component/products/products.vue'
 import productRow from '../index/component/products/productRow.vue'
 import groupCard from "../index/component/groupProduct/groupCard";
 import groupCardList from '../index/component/groupList/index'
 import groupPurchaseWelfarefrom from "../index/component/groupList/groupPurchaseWelfarefrom"
 import wxHeader from '../index/component/wxHeader/index'
 import swipersTranslate from '../index/component/swipers/swipersTranslate'
 import nearbyShops from "../index/component/nearbyShops/nearbyShops"
 import countdowns from "../index/component/countDown/countDown";
 import transferActivities from "../index/component/transferActivities/transferActivities";
 import shootingActivity from '../index/component/transferActivities/shootingActivity'
 import transferFiltering from '../index/component/transferActivities/transferFiltering'







 export default {
  name: '',
  data() {
   return {
    statusBarHeight: eeui.getStatusBarHeightPx(),
    pageNum: 1,
    pageSize: 10,
    loadinging:false,
    refreshing:false,
    length: '',
    componentsList: [],
    startSwipers: false,
    secondSwipers: false,
    thirdSwipers: false,
    fourthSwipers: false,
    fifthSwipers: false,
    isShow: false,
    lastTime: null,
    mchId: null,
    backgroundColor: "",
    refreshTitle:'释放刷新页面...',
     pageId:5
   }
  },
  created() { // 在实例创建完成后被立即调用
   this.loadWxpage();
    this.pageId = app.config.params
  },
  methods: {
   onpullingdown(event) {
    this.refreshTitle = '释放刷新页面...'
   },
   onrefresh(event) {
    this.refreshing = true
    this.refreshTitle = '加载中...'
    setTimeout(() => {
     this.pageNum=1
     this.refreshing = false
    }, 1000)
   },
   onloading(event) {
    this.loadinging = true
    setTimeout(() => {
     this.loadinging = false
     this.pageNum += 1
    }, 1000)
   },
   loadWxpage() {
    let curTime = new Date().getTime();
    if (this.lastTime != null && this.getGlobalData().mchId == this.mchId) {
     if (this.lastTime > (curTime - 1800)) {
      return;
     }
    }
    this.lastTime = curTime;
    list({
     mchId: this.getGlobalData().mchId,
     pageNum: this.pageNum,
     pageSize: this.pageSize,
     sortField: 'orders',
     direction: 'asc'
    }).then(res => {
     this.mchId = this.getGlobalData().mchId
      // 2是服务站
      res.data.data.forEach(item=>{
        if (this.pageId == item.orders){
          console.info(this.pageId)
          console.info(item.orders)

          this.loadDesigner(item.id)
          this.getPageInfo(item.id)
        }
        // this.loadDesigner(res.data.data[0].id)
        // this.getPageInfo(res.data.data[0].id)
      })
    })
   },
   getPageInfo(id) {
    find(id).then(res => {
     if (res.data.wxPage.hasOwnProperty('backgroundColor') && !this.isNull(res.data.wxPage.backgroundColor)) {
       this.backgroundColor=res.data.wxPage.backgroundColor
     }
    })
   },
   loadDesigner(data) {
    var _this = this
    // console.info("设计器的数据")
    // console.info(data)
    designerList({
     mchId: this.getGlobalData().mchId,
     pageId: data,
    }).then(res => {
      //       console.info('44444454545454545454545454545454554')
      //     console.info(res)
      // console.log(res)
     _this.componentsList = res.data
     _this.length = res.data.length
    })
   },
  },
  components: {
     adBanner,
     acrossAd,
     acrossService,
     hotGoods,
     category_ten,
     category_eight,
     category_six,
     category_five,
     category_three,
     category_four,
     xcxAd,
     swipersChange,
     swipers,
     noData,
     products,
     brand,
     productRow,
     groupCard,
     groupCardList,
     wxHeader,
     swipersTranslate,
     nearbyShops,
      groupPurchaseWelfarefrom,
    countdowns,
    transferActivities,
    shootingActivity,
    transferFiltering

  },
 }
</script>

<style scoped>
 .page {
  /*background: rgba(248, 248, 248, 0.8);*/
   flex: 1;
 }
 .refresh {
  /*margin-top: 20px;*/
  /*height: 60px;*/
     width: 750px;
     display: -ms-flex;
     display: -webkit-flex;
     display: flex;
     -ms-flex-align: center;
     -webkit-align-items: center;
     -webkit-box-align: center;
     align-items: center;
     padding-top: 40px;
     padding-bottom: 40px;
   }
 .loading {
  width: 750px;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
     padding-top: 40px;
     padding-bottom: 40px;
 }
 .loadingBox {
     height: 40px;
     width: 40px;
 }
 .column_box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
 }

 .top_nav {
  width: 750px;
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  /* align-items: center; */
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 999;
  flex-direction: column;
 }

 .search_content {
  display: flex;
  flex-direction: row;
  align-items: center;
 }

 .title_log {
  width: 56px;
  height: 69px;
 }

 .search_input_content {
  width: 508px;
  height: 56px;
  border: 1px solid rgba(212, 215, 220, 0.5);
  opacity: 0.95;
  display: flex;
  flex-direction: row;
  /* margin-left: 20px; */
  align-items: center;
  border-radius: 50px;
  overflow: hidden;
 }

 .icon_search {
  margin-left: 20px;
 }

 .search_input {
  width: 420px;
  height: 56px;
  margin-left: 14px;
  font-size: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.89;
 }
 .indicator-text {
     color: #888888;
     font-size: 22px;
     text-align: center;
  padding-top: 20px;
 }

</style>
